<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button type="primary" @click="dialogVisible = true">添加</el-button>
      </div>
      <el-table :data="list" border style="width: 100%">
        <el-table-column fixed align="center" type="index" width="50" />
        <el-table-column
          prop="addressName"
          align="center"
          label="地址名称"
          width="180"
        />
        <el-table-column
          prop="sendStatus"
          align="center"
          label="默认发货地址"
          width="120"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.sendStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="bill(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          align="center"
          label="收货人姓名"
          width="120"
        />
        <el-table-column
          prop="phone"
          align="center"
          label="收货人电话"
          width="240"
        />
        <el-table-column
          prop="detailAddress"
          align="center"
          label="收货人地址"
          width="100"
        >
          <template slot-scope="scope">
            <p>{{ scope.row.province }}</p>
            <p>{{ scope.row.city }}</p>
            <p>{{ scope.row.region }}</p>
          </template>
        </el-table-column>
        <el-table-column
          prop="receiveStatus"
          align="center"
          label="默认收货地址"
          width="120"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.receiveStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
              @change="take(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="modifyTime"
          align="center"
          label="创建时间"
          width="240"
        />
        <el-table-column fixed="right" align="center" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="handleClick(scope.row)"
            >查看</el-button>
            <el-button
              type="text"
              size="small"
              @click="dellive(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 弹出框 -->
    <el-dialog
      title="新增地址"
      :visible.sync="dialogVisible"
      width="60%"
      :before-close="handleClose"
    >
      <div style="width: 60%">
        <el-form
          ref="ruleForm"
          :model="ruleForm"
          :rules="rules"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="发货地址" prop="addressName">
            <el-input v-model="ruleForm.addressName" />
          </el-form-item>
          <el-form-item label="发货人姓名">
            <el-input v-model="ruleForm.name" />
          </el-form-item>
          <el-form-item label="收货人手机号">
            <el-input v-model="ruleForm.phone" />
          </el-form-item>
          <el-form-item label="邮政编码">
            <el-input v-model="ruleForm.postCode" />
          </el-form-item>
          <el-form-item label="详细地址">
            <el-input v-model="ruleForm.detailAddress" />
          </el-form-item>
          <el-form-item label="收货地址">
            <el-cascader
              v-model="selectedOptions"
              size="large"
              :options="options"
              @change="handleChange"
            />
          </el-form-item>
          <el-form-item label="默认发货地址">
            <el-switch
              v-model="ruleForm.sendStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item label="默认收货地址">
            <el-switch
              v-model="ruleForm.receiveStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              v-show="cood == true"
              type="primary"
              @click="submitForm('ruleForm')"
            >立即创建</el-button>
            <el-button
              v-show="cood == false"
              type="primary"
              @click="submitForm('ruleForm')"
            >更改</el-button>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="running">取 消</el-button>
        <el-button
          type="primary"
          @click="dialogVisible = false"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script >
import {
  addressList,
  delcompanyAddress,
  save,
  update,
  setReceiveOne, setSendOne
} from '@/api/order/index'
import {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
} from 'element-china-area-data'
export default {
  components: {},
  data() {
    return {
      dialogVisible: false,
      list: [],
      ruleForm: {
        addressName: '', // 地址名称
        city: '', // 市
        detailAddress: '', // 详细地址
        name: '', // 收发货人姓名
        cityCode: '', // 地址编码
        phone: '', // 收货人电话
        postCode: '', // 邮政编码
        province: '', // 省/直辖市
        receiveStatus: 0, // 是否默认收货地址：0->否；1->是
        region: '', // 区
        sendStatus: 0, // 默认发货地址：0->否；1->是
        id: ''
      },
      cood: true, // 添加和更改的变化
      CodeToText,
      TextToCode,
      options: regionDataPlus, // 三级联动系列
      selectedOptions: [], // 三级联动
      rules: {
        addressName: [
          { required: true, message: '请输入活动名称', trigger: 'blur' }
        ]
      }
    }
  },

  computed: {},
  created() {
    this.addressListAPI()
  },

  mounted() {},

  methods: {
    // 修改默认发货
    bill(row) {
      var _this = this
      setSendOne({ id: row.id, sendStatus: row.sendStatus }).then(res => {
        console.log(res)
        if (res.success) {
          _this.addressListAPI()
          _this.$message.success('更新成功')
        }
      })
    },
    // 默认收货
    take(row) {
      var _this = this
      setReceiveOne({ id: row.id, receiveStatus: row.receiveStatus }).then(res => {
        console.log(res)
        if (res.success) {
          _this.addressListAPI()
          _this.$message.success('更新成功')
        }
      })
    },
    running() {
      this.dialogVisible = false
      this.cood = true
    },
    // 三级联动
    handleChange(value) {
      console.log(value)
      var vint = []
      var timi = ''
      value.forEach((ele) => {
        vint.push(this.CodeToText[ele])
      })
      this.ruleForm.cityCode = value.toString()
      this.ruleForm.province = vint[0]
      this.ruleForm.city = vint[1]
      this.ruleForm.region = vint[2]
      console.log(this.ruleForm)
    },
    // 删除地址
    dellive(row) {
      var _this = this
      delcompanyAddress(row.id).then((res) => {
        console.log(res)
        if (res.success) {
          _this.$message.success('删除成功')
          _this.addressListAPI()
        }
      })
    },
    addressListAPI() {
      var _this = this
      addressList().then((res) => {
        console.log(res)
        if (res.success) {
          _this.list = res.data.items
        } else {
          _this.$message, success('对不起刷新失败')
        }
      })
    },
    // 弹出框
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
          this.cood = true
        })
        .catch((_) => {})
    },
    //   表单验证
    submitForm(formName) {
      var _this = this
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.cood) {
            save({ ...this.ruleForm }).then((res) => {
              console.log(res)
              if (res.success) {
                _this.$message.success('添加成功')
                _this.cood = true
                _this.$data.ruleForm = _this.$options.data().ruleForm
                _this.addressListAPI()
                _this.dialogVisible = false
              }
            })
          } else {
            update({ ...this.ruleForm }).then((res) => {
              console.log(res)
              if (res.success) {
                _this.$message.success('修改成功')
                _this.cood = true
                _this.$data.ruleForm = _this.$options.data().ruleForm
                _this.addressListAPI()
                _this.dialogVisible = false
              }
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(row) {
      var newarr = row.cityCode
      this.selectedOptions = newarr.split(',')
      console.log(this.selectedOptions)
      this.cood = false
      this.ruleForm = row
      this.dialogVisible = true
    }
  }
}
</script>
<style lang="scss" scoped>
.box-card {
  margin: 30px;
}
</style>
